<template>
  <div>
    <!-- <my-nav-bar left-arrow title="首页" left-text="返回" icon="cross">
      <template #left> 返回插槽 </template>
    </my-nav-bar> -->
    <my-nav-bar title="首页"></my-nav-bar>
    <my-search></my-search>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
      <van-swipe-item v-for="(item, index) in pirtures" :key="item.goods_id">
        <img class="swipe_img" :src="item.image_src" />
      </van-swipe-item>
    </van-swipe>
    <!-- 导航 -->
    <ul class="nav">
      <li v-for="(item, index) in navList" :key="index">
        <img :src="item.image_src" />
      </li>
    </ul>
    <!-- 楼层 -->
    <ul class="fooler">
      <li v-for="(item, index) in floorList" :key="index">
        <img class="title_img" :src="item.floor_title.image_src" />
        <div class="img_content">
          <!-- <img :src="item.floor_title[0].image_src" alt="" srcset="">
          <div>
          </div> -->
          <img
            :class="i > 0 ? 'small' : ''"
            v-for="(n, i) in item.product_list"
            :key="i"
            :src="n.image_src"
          />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
// import axios from "axios"; // 引入请求
// import myNavBar from "../../components/myNavBar.vue";
import mySearch from "../../components/mySearch.vue";
// import { closeToast } from "vant";
// import api from "../../api/index";
import { getBanner, getnav, getfool } from "../../api/home/index";
export default {
  data() {
    return {
      pirtures: [], // 轮播图片数据
      navList: [], // 导航的数据
      floorList: [], // 楼层的数据
    };
  },
  created() {
    getBanner().then((res) => {
      // 轮播图的请求
      this.pirtures = res.message;
    });

    getnav().then((res) => {
      // 导航的接口
      this.navList = res.message;
    });

    getfool().then((res) => {
      // 楼层的触发接口
      this.floorList = res.message;
    });
    // api.get("/public/v1/home/swiperdata", { params: { id: 33 } }).then((res) => {
    //   console.log(res);
    //   this.pirtures = res.message;
    // });
    // showLoadingToast({
    //   message: "加载中...",
    //   forbidClick: true,
    //   duration: 0,
    // });
    // axios
    //   .get("https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata")
    //   .then((res) => {
    //     // 轮播图的请求
    //     // 请求成功的函数
    //     // console.log(res);
    //     this.pirtures = res.data.message;
    //   })
    //   .catch((err) => {
    //     // 请求错误，捕获异常
    //     console.log(err);
    //   });
    // axios({
    //   // 导航的请求
    //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems",
    //   method: "get",
    // }).then((res) => {
    //   this.navList = res.data.message;
    // });
    // axios
    //   .get("https://api-hmugo-web.itheima.net/api/public/v1/home/floordata")
    //   .then((res) => {
    //     // console.log(res);
    //     this.floorList = res.data.message;
    //   });
  },
  methods: {},
  components: { mySearch },
};
</script>

<style lang="scss" scoped>
.swipe_img {
  width: 100%;
}
.nav {
  display: flex;
  margin-top: 10px;
  li {
    flex: 1;
    text-align: center;
    img {
      width: 80%;
    }
  }
}
.fooler {
  margin-top: 10px;
  overflow: hidden;
  .title_img {
    width: 400px;
    margin-top: 5px;
  }
  .img_content {
    img {
      float: left;
      margin-right: 5px;
      width: calc(33% - 5px);
      margin-bottom: 5px;
    }
    .small {
      height: 100px;
    }
  }
}
</style>
